<div *ngIf="task" class="editable h-100 d-flex w-100" #elementStartDate>
  <!--  <span class="align-items-center d-flex h-100 w-100 picker-padding">-->
  <!--    {{task.start_date | date: 'MMM dd,yyyy'}}-->
  <!--  </span>-->
  <span nz-typography class="date-text w-100">{{task.start_date | dateFormatter}}</span>
  <nz-date-picker
    class="border-0 bg-transparent w-100 task-list-date-picker"
    [(ngModel)]="task.start_date"
    (ngModelChange)="handleStartDateChange($event, task)"
    [nzFormat]="'MMM dd,yyyy'"
    [nzSuffixIcon]="''"
    [nzPlaceHolder]="'Set a start date'"
    [nzDisabledDate]="task.end_date | validateMaxDate"
    (nzOnOpenChange)="toggleHighlightCls($event, elementStartDate)"
  >
  </nz-date-picker>
</div>
